<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<base href="${pageContext.request.contextPath}/">
	<link href="bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<%--bootstrap-table核心css--%>
	<link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css">
	<%--bootstrap-datetimepicker核心css--%>
	<link rel="stylesheet" type="text/css" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">

</head>
<body>
	<!-- 创建用户的模态窗口 -->
	<div class="modal fade" id="createUserModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 50%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">新增字典类型</h4>
				</div>
				<div class="modal-body">

					<form class="form-horizontal" role="form" id="create-from">

						<div class="form-group">
							<label for="create-code" class="col-sm-2 control-label">编码<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" >
								<input type="text" class="form-control" id="create-code" >
								<sapn id="zh_span" style="color: red"></sapn>
							</div>
						</div>
						<div class="form-group">
							<label for="create-description" class="col-sm-2 control-label">描述<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="create-description">
								<span style="color: red" id="loginPWd_span"></span>
							</div>
						</div>
						<div class="form-group">
							<label for="create-name" class="col-sm-2 control-label">名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="create-name">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" onclick="save()">保存</button>
				</div>
			</div>
		</div>
	</div>

	<%--修改用户的模态窗口--%>
	<div class="modal fade" id="editUserModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 90%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="editModalLabel">修改用户</h4>
				</div>
				<div class="modal-body">

					<form class="form-horizontal" role="form">
						<input type="hidden" id="edit-id">
						<div class="form-group">
							<label for="create-code" class="col-sm-2 control-label">编码<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-code" readonly>
								<sapn id="editzh_span" style="color: red"></sapn>
							</div>
							<label for="create-name" class="col-sm-2 control-label">名称</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-name">
							</div>
						</div>
						<div class="form-group">
							<label for="create-description" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-description">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" onclick="edit()">保存</button>
				</div>
			</div>
		</div>
	</div>

	<%--页面导航--%>
	<div>
		<ol class="breadcrumb">
			<li><a href="#">首页</a></li>
			<li><a href="#">权限管理</a></li>
			<li class="active">字典类型列表</li>
		</ol>
	</div>

	<%--表格部分--%>
	<div class="panel-body">
		<form id="searchForm" class="form-inline">
			<div class="form-group">
				<input type="text" id="name" placeholder="名称" class="form-control">
			</div>
			<div class="form-group">
				<button type="button" class="btn btn-primary" onclick="$('#tab').bootstrapTable('refresh');">
					<span class="glyphicon glyphicon-search"></span>&ensp;搜索</button>
				<button type="button" class="btn btn-primary" onclick="$('#searchForm')[0].reset();$('#tab').bootstrapTable('refresh');">
					<span class="glyphicon glyphicon-calendar"></span>&ensp;清空</button>
			</div>
			<div class="form-group">
				<button type="button" class="btn btn-primary " onclick="$('#createUserModal').modal('show');">
					<span class="glyphicon glyphicon-plus"></span>&ensp;新增</button>
				<button type="button" class="btn btn-danger" onclick="removeBatch()">
					<span class="glyphicon glyphicon-trash"></span>&ensp;批量删除</button>
			</div>
		</form>
		<table id="tab" class="table table-hover table-striped table-bordered"></table>
	</div>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<%--bootstrap-table核心js--%>
	<script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>
	<%--bootstrap-table中文语言包--%>
	<script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
	<%--bootstrap-datetimepicker核心js--%>
	<script type="text/javascript" src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
	<%--bootstrap-datetimepicker中文语言包--%>
	<script type="text/javascript" src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

</body>
<script type="text/javascript">
	//页面加载函数
	$(function () {
		initTable();
		//新增模态框隐藏时触发一个事件
		$('#createUserModal').on('hidden.bs.modal',function () {
			$('#create-from')[0].reset();
		});
	});

	<%--初始化表格--%>
	function initTable() {
		//调用配置异步表格方法
		$('#tab').bootstrapTable({
			//表格配置项
			//表格高度
			/*height:500,*/
			//本地数据
			/*data:[
				{'id':1001,'name':'张三','age':30},
				{'id':1002,'name':'李四','age':32},
				{'id':1003,'name':'王五','age':33},
				{'id':1004,'name':'赵六','age':34},
				{'id':1005,'name':'马奇','age':35},
				{'id':1006,'name':'纪八','age':36},
			],*/
			//http请求方式
			method:'get',
			//请求路径
			url:'dictype/page',
			//开启分页
			pagination:true,
			//设置分页的位置，server服务端分页，local前端分页
			sidePagination: 'server',
			//设置每页条数
			pageSize:10,
			//设置每页条数列表
			pageList:[10,20,50],
			paginationPreText: '上一页',
			paginationNextText: '下一页',
			//设置发送参数的格式‘’表示发送参数名字为pageNumber(起始偏移量)        pageSize(每页条数)
			// 不设置这个默认发的是offset(起始偏移量)  跟limit(每页条数)
			queryParamsType: '',
			//查询时的参数
			queryParams:function (params) {
				console.log(params+"sadasdadasda");
				//获取自定义的请求参数
				params.name=$('#name').val();
				return params
			},
			//处理响应的格式
			responseHandler:function (res) {
				if (res.code == 0){
					/**
					 * 如果开启分页
					 * bootstrap-table中分页要求的数据格式为
					 * {
					 *     rows:[],     //当前页列表数据
					 *     total:100    //总记录数
					 * }
					 */
					// return res.data;
					return{
						rows: res.data.list,
						total:res.data.total
					}

				}
			},
			//点击选中
			chickToSelect:true,
			//单选
			singleSelect:false,
			//工具栏
			toolar:'#searchForm',
			//辅助功能
			showRefresh: true,
			showToggle: true,
			showFullscreen: true,
			//表格中的列描述
			columns:[
				{
					//复选框
					checkbox:true
				},{
					title:'编码',
					field:'code',
					halign:'center',
					align: 'center'
				},{
					title:'名称',
					field:'name',
					halign:'center',
					align: 'center'
				},{
					//列名
					title:'描述',
					//列数据:数据从数据对象获取
					field:'description',
					//表头对齐方法
					halign:'center',
					//值居中
					align: 'center'
				},{
					//列名
					title:'操作',
					//表头对齐方法
					halign:'center',
					//数据对齐方法
					align:'center',
					//row表示一行内所有的数据
					formatter:function (value,row) {
						return '<button type="button" class="btn btn-warning btn-xs" onclick="openEdit(\''+row.code+'\')">编辑</button>&emsp;'+
								'<button type="button" class="btn btn-danger btn-xs" onclick="remove(\''+row.code+'\')">删除</button>&emsp;';
					}
				}
			]
		});
	}

	//新增
	function save(){
		$.ajax('dictype/add',{
			type: 'post',
			//设置发送请求的格式
			contentType:'application/json',
			//对象转json
			data:JSON.stringify({
				code:$('#create-code').val(),
				name:$('#create-name').val(),
				description:$('#create-description').val(),
			}),
			beforeSend:function () {
				var code = $('#create-code').val();
				var name = $('#create-name').val();
				var description = $('#create-description').val();
				//js中的变量可放在if判断中，如果变量值为null/空字符串/undefined/0/NaN判断结果返回false
				if (!code){
					alert("编码不能为空");
					return false;
				}
				if (!name){
					alert("名称不能为空");
					return false;
				}
				if (!description){
					alert("描述不能为空");
					return false;
				}
			},
			//接收响应
			success:function (res){
				if (res.code == 0){
					alert('新增成功');
					//刷新表格
					$('#tab').bootstrapTable('refresh');
					//隐藏模态框
					$('#createUserModal').modal('hide');
				}else {
					alert(res.message);
				}
			}
		});
	}

	//打开修改
	function openEdit(id){
		alert(id);
		$.ajax('dictype/find/'+id,{
			type:'get',
			success:function (res) {
				if (res.code == 0){
					$('#edit-code').val( res.data.code) ;
					$('#edit-name').val(res.data.name);
					$('#edit-description').val(res.data.description);
					$('#editUserModal').modal('show');
				}
			}
		});
	}

	//修改
	function edit(){
		//数据校验

		$.ajax('dictype/edit',{
			type: 'put',
			//设置发送请求的格式
			contentType:'application/json',
			//对象转json
			data:JSON.stringify({
				code:$('#edit-code').val(),
				name:$('#edit-name').val(),
				description:$('#edit-description').val(),
			}),
			beforeSend:function () {
				var code = $('#edit-code').val();
				var name = $('#edit-name').val();
				var description = $('#edit-description').val();
				//js中的变量可放在if判断中，如果变量值为null/空字符串/undefined/0/NaN判断结果返回false
				if (!code){
					alert("登陆账户不能为空");
					return false;
				}
				if (!name){
					alert("登陆账户不能为空");
					return false;
				}
				if (!description){
					alert("状态账户不能为空");
					return false;
				}
			},
			//接收响应
			success:function (res){
				if (res.code == 0){
					alert('修改成功');
					//刷新表格
					$('#tab').bootstrapTable('refresh');
					//隐藏模态框
					$('#editUserModal').modal('hide');
				}else {
					alert(res.message);
				}
			}
		});
	}

	//删除
	function remove(id) {
		if (confirm('确定要删除该条数据吗？')){
			$.ajax('dictype/delete',{
				type:'post',
				data:{
					_method:'delete',
					id:id
				},
				success:function (res) {
					if (res.code == 0){
						alert('删除成功');
						//刷新表格
						$('#tab').bootstrapTable('refresh');
					}else {
						alert(res.message);
					}
				}
			});
		}
	}

	//批量删除
	function removeBatch() {
		//获取用户的选择
		var rows = $('#tab').bootstrapTable("getSelections");
		if (rows.length == 0){
			alert('请选择要删除的数据');
		}else {
			//如果用户点的取消 取反  结束方法
			if (!confirm('确定要删除该条数据吗?')){
				return;
			}
			//定义一个空的数组存储id
			var ids = [];
			$.each(rows,function () {
				//循环取出用户选择的id存入数组
				ids.push(this.code);
			});
			console.log(ids);
			$.ajax('dictype/removes',{
				// type:'delete',   delete请求 在ajax中无法携带参数
				type:'post',
				data:{
					'_method':'delete',
					//拼接起来 把数组中所有的元素拼接起来用逗号间隔
					ids:ids.join()
				},
				success:function (res) {
					if(res.code == 0){
						alert('删除成功');
						//刷新表格
						$('#tab').bootstrapTable('refresh');
					}else {
						alert(res.message);
					}
				}
			});
		}
	}

</script>
</html>